<!DOCTYPE html>
<html>
<head>
    {include file="Public/header"}
    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
</head>
<body>

<form action="" class="form-inline" id="add">
    <div class="form-group" style="padding:5px 10px;">
        <input type="text" name="searchMap" id="search" onkeydown="if(event.keyCode==13) search($(this).val());">
        <button id="sbtn">搜索</button>
        <label for="" class="control-label">经度</label><input type="text" id="lng" readonly>&nbsp;<label for="" class="control-label">纬度</label><input type="text" id="lat" readonly>&nbsp;<label for="" class="control-label">详细地址</label><input type="text" id="detailAddress" >
        <button id="tijiao">保存</button>
    </div>

</form>
<div id="allmap"></div>
<div id="result">
    <div style="padding-top:260px;font-size:20px;height:100%;text-align:center;color: #0a0a0a">搜索结果</div>
</div>

{include file="Public/footer"}
<script type="text/javascript"
        src="http://api.map.baidu.com/api?v=2.0&ak=1IMGhA8nTnmf6LMGCLcVQaBt9TDWxoGc"></script>

<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");    // 创建Map实例
    map.centerAndZoom("上海", 13);      // 初始化地图,用城市名设置地图中心点
    map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    map.addControl(new BMap.NavigationControl());//左上角，添加默认缩放平移控件
    //添加覆盖物
    function showInfo(e) {
        map.clearOverlays();//移除点
        point = new BMap.Point(e.point.lng, e.point.lat);//坐标
        map.addOverlay(new BMap.Marker(point));// 创建点
        var geoc = new BMap.Geocoder();//逆地址解析
        var pt = e.point;
        geoc.getLocation(pt, function (rs) {
            var addComp = rs.addressComponents;
            console.log(rs);
            address = addComp.province + ", "
                + addComp.city + ", "
                + addComp.district + ", "
                + addComp.street + ", "
                + addComp.streetNumber;
            $('#lng').val(rs.point.lng)
            $('#lat').val(rs.point.lat)
            $('#detailAddress').val(address)
            console.log(address)
        });
    }

    map.addEventListener("click", showInfo);//地图点击事件
    function search(val) {
        var local = new BMap.LocalSearch(map, {
            renderOptions: {map: map, panel: "result"},//搜索结果显示到地图上
            pageCapacity: 5   //容量
        });
        local.search(val);//全国搜索
//            local.searchInBounds(val, map.getBounds());//当前地图附近搜索
    }

    $(function () {
        $('#sbtn').click(function () {
            search($("input[name=searchMap]").val())
            return false;
        })
        
        //保存地址
        $('#tijiao').click(function () {
            var lng = $('#lng').val()
            var lat = $('#lat').val()
            var detailAddress = $('#detailAddress').val()
            var action = $('#add').attr('action')
            $.post(
                action,
                {lng:lng,lat:lat,detailAddress:detailAddress},
                function (data) {
                    if(data.success){
                        parent.$('#detailAddress').text(detailAddress)
                        parent.swal({title:data.msg,type:'success'},function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name))
                        })
                    }else{
                        parent.swal(data.msg,'','error')
                    }
                },
                'json'
            )
            return false
        })
    })

</script>
</body>
</html>